<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav" @click="goBack"></a>
			<h1 class="mui-title">新闻资讯</h1>
		</header>		
		<div class="mui-content">			
			<div class="" style="top: 44px;">
				<div class="nav">
					<ul>
						<li v-for="nav in navList">
							<router-link :to="{ name: 'NewsList', params: { type: nav.typeId } }" replace>{{ nav.typeName }}</router-link>
							<!-- <a :class="{ 'active': index==curIndex }" @click="chooseType(nav.id, index)">{{ nav.name }}</a> -->
						</li>
					</ul>
				</div>
				<div class="container">
			        <scroller :on-infinite="infinite" ref="my_scroller">
			        	<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed newslist">
					        <li class="mui-table-view-cell" v-for="news in newsList" @click="goDetail(news.NewsID)">
					            <div class="mui-table">
					                <div class="mui-table-cell mui-col-xs-10">
					                    <h5 class="mui-ellipsis-2">{{news.Title}}</h5>
					                    <p class="mui-h6 mui-ellipsis">{{news.Date}}</p>
					                </div>
					                <!--<div class="mui-table-cell mui-col-xs-2 mui-text-right">
					                    <span class="mui-h5">12:25</span>
					                </div>-->
					            </div>
					        </li>
					    </ul>
			            <div style="height: 1px;"></div>
			        </scroller>
			    </div>			
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getNews,getNewsList
	} from '@/service/getData';
	export default {
		data() {
				return {
					navList: [],
					newsList: [],
					page: 0,
					init: false,
					schoolId: null
				}
			},
			created() {
				let self = this;
				self.type = self.$route.params.type;
				self.schoolId = self.$route.params.schoolId;
				getNews({
					schoolId: self.schoolId
				}).then((res) => {
					if(self.type == 'null') {
						self.$router.replace({ name: 'NewsList', params:{ type : res.data[0].typeId } })
					} else {
//						getNews({
//							schoolId:self.schoolId
//						}).then((res) => {
//							self.init = true;
							self.navList = res.data;
//							self.$refs.my_scroller.finishInfinite(false)
//						});
					}
				});
				getNewsList({
                    schoolId: self.schoolId,
                    typeId: this.type,
                    PageIndex: this.page++,
                    PageSize:10
                }).then((res) => {
                	if(res.code == 1 && res.data.length == 10) {
						self.init = true;
						self.$refs.my_scroller.finishInfinite(false)
					} else {
						self.$refs.my_scroller.finishInfinite(true)
					}	
					self.newsList = res.data;
                })
			},
			methods: {
				infinite(done) {
					if(!this.init) {
						return false;
					}
		            let self = this;
		            //数据不满一屏，自动补满
		            setTimeout(() => {
		                getNewsList({
		                    schoolId: self.schoolId,
		                    typeId: this.type,
		                    PageIndex: this.page++,
		                    PageSize:10
		                }).then((res) => {
		                	if(res.data != null){
		                		 if (res.data.length == 10) {
			                        setTimeout(() => {
			                            done()
			                        })
			                    } else {
			                        setTimeout(() => {
			                            self.$refs.my_scroller.finishInfinite(false)
			                        });
			                    }
			                    self.newsList = self.newsList.concat(res.data);
		                	}else{
		                		done(true)
		                	}
//		                    console.log(self.newsList)
		                })
		            }, 500)
		        },
		        goDetail(id) {
		        	this.$router.push({ name: 'NewsDetail', params: { newsId: id } })
		        	// alert('id为' + id)
		        }
			},
			watch: {
				$route () {
					let self = this;
					if(!self.init) {
						getNews({
							schoolId:self.schoolId
						}).then((res) => {
							self.init = true;
							self.navList = res.data;
							self.$refs.my_scroller.finishInfinite(false)	
						});
					}					
					this.page = 0;
					this.type = this.$route.params.type;
					this.newsList = [];	
					this.$refs.my_scroller.finishInfinite(false)
				}
			}
	}
</script>

<style scoped>
	.container {
	   top: 84px;
	}
	.nav {
		height: 40px;
		overflow: hidden;
		border-bottom: 1px solid #E5E5E5;
	}
	.nav ul {
		white-space: nowrap;
		overflow-x: auto;
		height: 60px;
		background-color: #fff;
	}
	.nav li {
		display: inline-block;
		min-width: 25%;
	}
	.nav a {
		display: block;
		height: 39px;
		text-align: center;
		line-height: 39px;
		padding: 0 10px;
		box-sizing: border-box;
		border-bottom: 2px solid transparent;
		color: #333;
	}
	.nav a.router-link-active {
		border-bottom: 2px solid #1883d5;
		color: #1883D5;
	}
	.newslist li {
		padding: 10px!important;
	}
	.newslist li h5{
		color: #333333;
		font-size: 15px;
	}
</style>